<template>
    <div class="quiz-result">
		<y-nav title="超准！十道题看透你的爱情观" :shareData="shareData" :goBack="backToIndex"></y-nav>
		<img :src="imgSource" alt="" class="quiz-result-img" :class="marginForX">
		<div class="result-nickname" :style="{top: topForX}">{{userData.userNickName}}</div>
		<img src="../assets/quiz_user_img_bg.png" alt="" class="quiz-img-bg" :style="{top: posForX}">
		<img :src="userData.userImg" class="user-img" :style="{top: userImgPosForX}">

        <div class="bottom-wrap" :class="{'bottomMarginForX':$utils.isIphoneX()}">
			<img src="../assets/quiz_result_logo.png" alt="" class="quiz-result-logo">
			<div class="btn-wrap">
				<img src="../assets/quiz_result_share_btn.png" alt="" class="share-btn" @click="shareResult"
				>
				<div class="spread-entry" @click="toSpreadPage">查看我的推广情况</div>
			</div>
			<div class="quiz-result-qr-wrap">
				<div id="qrcode" class="qr-code"></div>
			</div>
        </div>
    </div>
</template>
<script>
import result from './data/result.json';
import code from './data/code.json';
import img_a from '../assets/quiz_result_a.png';
import img_b from '../assets/quiz_result_b.png';
import img_c from '../assets/quiz_result_c.png';
import img_d from '../assets/quiz_result_d.png';
import defaultUserImg from '../assets/default_user_img.png';
import Nav from '@/components/nav';
import shareData from './data/shareData.js';
import QRCode from 'qrcodejs2';
const imageMap = {
  'c': 'https://cdn.yryz.com/lovelorn/image/public/201901/%E9%92%A2%E9%93%81%E4%BE%A0@3x.png',
  'b': 'https://cdn.yryz.com/lovelorn/image/public/201901/%E6%B5%AA%E6%BC%AB%E6%B4%BE@3x.png',
  'a': 'https://cdn.yryz.com/lovelorn/image/public/201901/%E7%90%86%E6%80%A7%E4%BA%BA@3x.png',
  'd': 'https://cdn.yryz.com/lovelorn/image/public/201901/%E6%81%8B%E7%88%B1%E8%84%91@3x.png'
}
export default {
	components: {
		[Nav.name]: Nav
	},
    data() {
        return {
			resData: {},
			userData: {},
			headers: {},
			shareData,
        }
    },
    methods: {
        toSpreadPage() {
            this.$router.push('/official-activity/quiz-spread');
        },
		// 后端统计完成测试人数
		
        async getUserInfo() {
			let { userId } = this.headers;
            let res = await this.$http.get(`/lovelorn/v1.3/pt/user-infos/${userId}`);
			this.userData = res.data.data;
			if (!this.userData.userImg) {
				this.userData.userImg = defaultUserImg;
			}
		},
		// 分享图片
		shareResult() {
			let shareImageUrl = imageMap[this.$route.params.id];
			let { userId } = this.headers;
			let { title } = this.shareData;
			let data = {
				title,
				imgUrl: shareImageUrl,
				url: `${window.location.origin}/official-activity/quiz-share/${code.channelCode}-${userId}`
			}
			this.$yryz.shareTestSubject(data);
		},


		qrcode() {
			let qrcode = new QRCode('qrcode', {
				width: 78,
				height: 78,
				text: `${window.location.origin}/official-activity/quiz-share/${code.channelCode}-${this.headers.userId}`,
				colorDark: '#000',
				colorLight: '#fff'
			})
		},
		backToIndex() {
			this.$yryz.goBack();
		}
    },
    computed: {
        imgSource() {
            let resultId = this.$route.params.id;
            let imgSource = img_a;
            switch (resultId) {
                case 'a':
                    imgSource = img_a;
                    break;
                case 'b':
                    imgSource = img_b;
                    break;
                case 'c':
                    imgSource = img_c;
                    break;
                case 'd':
                    imgSource = img_d;
                    break;
                default:
                    imgSource = img_a;
            }
            return imgSource;
		},
		marginForX() {
			return this.$utils.isIphoneX() ? 'marginForX' : '';
		},
		posForX() {
			return this.$utils.isIphoneX() ? '2.5rem' : '';
		},
		userImgPosForX() {
			return this.$utils.isIphoneX() ? '2.61rem' : '1.91rem';
		},
		topForX() {
			return this.$utils.isIphoneX() ? '3rem' : '2.2rem';
		}
	},
    async created() {
		this.headers = await this.$yryz.httpHeader();
		this.getUserInfo();
		this.qrcode();
    }
}
</script>
<style>
.quiz-result {
    background-image: url('../assets/quiz_qa_bg.png');
    background-size: cover;
	padding-bottom: 4%;
	height: 100vh;

	& .posForX{
		top: 2.5rem;
	}
	& .userImgPosForX{
		top: 2.61rem;
	}
   & .quiz-result-img{
       width: 7.23rem;
       height: 8.89rem;
       margin-top: 4%;
       margin-left: 0.15rem;
   }
   & .marginForX{
		margin-top: 7%;
   }

   & .bottom-wrap{
       display: flex;
       justify-content: space-between;
       padding: 0 0.3rem;
	   /* margin-top: 2%; */
	   position: absolute;
	   bottom: .5rem;
   }
   & .bottomMarginForX{
		margin-top: 16%;
		padding-bottom: 15%;
	}
   & .quiz-result-qr-wrap{
		background-image: url('../assets/quiz_result_qr_wrap.png');
		background-size: contain;
       width: 1.81rem;
	   height: 2.21rem;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   padding-top: .4rem;
   }
   & .quiz-result-logo{
       width: 3.47rem;
       height: 2.21rem;
   }
   & .btn-wrap{
       margin-top: 13%;
       margin-left: -25%;
       text-align: center;
   }
   & .share-btn {
       width: 2.87rem;
       height: 0.68rem;
   }
   & .spread-entry{
       color: #6d2421;
       font-size: 0.28rem;
       font-weight: 700;
   }
   & .result-nickname{
	   font-size: .3rem;
	   color: #6d2421;
	   font-weight: 700;
	   position: absolute;
	   top: 2.2rem;
	   right: 2.1rem;
   }
   & .user-img{
	   width: 1.3rem;
	   height: 1.3rem;
	   background: #f4d114;
	   border-radius: 0.7rem;
	   border: 2px solid #6d2421;
	   position: absolute;
	   top: 1.91rem;
	   right: .52rem;
   }
   & .quiz-img-bg{
	   width: 1.54rem;
	   width: 1.54rem;
	   position: absolute;
	   top: 1.8rem;
	   right: .4rem;
   }
   & .qr-code{
   }
}
</style>

